<!-- 支付方式组件 -->
<template>
		<!-- 选择支付方式 -->
		<u-popup :show="show" :round="10" bgColor="transparent" mode="bottom" @close="close2">
			
			<view class="content">
				<view class="content-item" v-for="res in list" @click="switchSelect(res)">
					<view class="content-item-box">
						<image class="image" :src="res.url" mode="aspectFill"></image>
						<text class="text">{{res.name}}</text>
					</view>
					<view :class="{
						'selectBox':!res.status
					}">
						<image v-if="res.status" class="select" src="/static/images/select.png" mode="aspectFill"></image>
					</view>
				</view>
				
			</view>
			
			<view class="button" @click="typeShowSubmit">
				确定
			</view>
			
		</u-popup>
</template>

<script>
	export default {
		props: {
			// 是否显示
			show: {
				type:Boolean,
				default:false
			},
			
			//关闭弹窗
			close:{
				type:Function,
				default:()=>{}
			},
			
			//传递切换值
			submit:{
				type:Function,
				default:()=>{}
			}
		},
		data() {
			return {
				list:[
					{
						name: '微信',
						value: 1,
						url: '/static/images/WX.png',
						status: true
					},
					{
						name: '余额',
						value: 0,
						url: '/static/images/balancePay.png',
						status: false
					},
				]
			};
		},
		methods:{
			/**
			 * 关闭弹窗
			 */
			close2(){
				this.$emit('close')
			},
			
			/**
			 * 切换选项
			 */
			switchSelect(val){
				this.list.forEach((res,index) =>{
					if(res.name === val.name){
						this.list[index].status =true 
						
					}else{
						this.list[index].status = false
					}
					
				})
			},
			
			/**
			 * 选择支付方式后的方法
			 */
			async typeShowSubmit(e) {
				
				// 遍历值,传递确定值
				this.list.map(res => {
					if(res.status){
						this.$emit('submit',res.value)
					}
				})
				
				// 关闭弹窗
				this.close2()
			},
		}
	}
</script>

<style lang="less" scoped>
	// 支付弹出框相关
	.content{
		#padding(24rpx 12rpx);
		#flex(-,start,center);
		#box(auto,176rpx,40rpx,#fff);
		
		margin: 32rpx 30rpx;
		
		.content-item{
			#flex(-,space-between,center);
			#padding(0 48rpx);
			width: 50%;
			
			.content-item-box{
				#flex(-,start,center);
				.image{
					#box(40rpx,40rpx);
					margin-right: 20rpx;
				}
				.text{
					#font(28rpx,#0f0d21);
				}
			}
			
			.selectBox{
				#box(36rpx,36rpx,50%,#fff,2rpx solid #d6d5d5);
			}
			.select{
				#box(36rpx,36rpx,50%);
				#flex(-,center,center);
			}
			

			
			
			&:not(:last-child){
				border-right: 2rpx solid #D9D9D9;
			}
		}
	}
	.button{
		margin: 0 30rpx 32rpx 30rpx;
		#box(auto,88rpx,44rpx,linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
		#flex(-,center,center);
		#font(36rpx,#fdf3f3);
	}
</style>
